<template>
	<view class="page-photo-cut  photo-operator">
		<view class="top-container flex-center">
			<template v-if="photoUrl">
				<!-- 单张 -->
				<view class="photo-wrap">
					<text class="photo-witdh">{{ showSize.width }}{{ showSize.unit }}</text>
					<text class="photo-height">{{ showSize.height }}{{ showSize.unit }}</text>
					<image class="photo-image" :style="photoImageStyle" :src="shuiyinUrl" mode="aspectFit"></image>
				</view>

				<view class="reupload-button custom-button white-btn-gray-text" @tap="onChoosePhoto">
					<u-button type="primary" shape="circle" text="重新上传"></u-button>
				</view>

			</template>
			<template v-else>
				<view class="upload-box" @tap="onChoosePhoto">
					<text class="add-icon">+</text>
					<view class="add-text">点击上传你的照片</view>
				</view>
			</template>

			<artificial-beauty />

		</view>

		<view class="field-container">
			<view class="choose-title">
				<text>选择尺寸</text>
			</view>
			<view class="choose-size-container">
				<choose-size :current="currentSize.mm" @change="onSizeChange" />
			</view>
			<view class="btn-double">
				<view class="custom-button full-button" @tap="onSavePhoto">
					<!-- 未上传图片时禁用 -->
					<u-button type="primary" shape="circle" :disabled="!userImage" text="保存电子照"></u-button>
				</view>
			</view>
		</view>
	</view>

	<view style="visibility: hidden;position: fixed; top: 200vh">
		<image :src="tempImage" @load="onImageLoad"></image>
	</view>
</template>
<script setup>
	import {
		onLoad,
		onReachBottom,
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		computed,
	} from "vue";
	import ArtificialBeauty from '@/components/artificial-beauty/artificial-beauty.vue';
	import ChooseSize from '@/components/choose-size/index.vue';
	import SwitchTab from '@/components/switch-tab/index.vue';
	import {
		getFileSize,
		pxTomm,
		uploadFile
	} from '@/common/js/method.js';

	// 用户上传的图片
	const userImage = ref('');
	const tempImage = ref(''); // 临时存储上传的url,用于图片加载后裁剪
	const photoUrl = ref(''); // 单张照地址
	const shuiyinUrl = ref(''); // 单张照水印地址

	const busiType = ref('photo-cut');
	// 默认选中一寸照
	const currentSize = ref({
		id: 1,
		specId: 1,
		minSize: 100,
		maxSize: 200,
		dpi: 300,
		name: "一寸",
		mm: '25x35',
		px: '295x413',
		unit: 'px',
	});

	const showSize = computed(() => {
		const unit = currentSize.value.unit;
		return {
			width: currentSize.value[unit].split('x')[0],
			height: currentSize.value[unit].split('x')[1],
			unit,
		}
	});
	const photoImageStyle = computed(() => {
		const width = +currentSize.value.px.split('x')[0];
		const height = +currentSize.value.px.split('x')[1];
		let large = width > height ? width : height; //取较长的一边
		let scale = large < 250 ? 1 : 250 / large; //较长边大于250px则缩放，另一边也按该比例缩放
		return {
			width: width * scale + 'px',
			height: height * scale + 'px',
		}
	})

	const getCustomFileSize = async (src) => {
		if (!currentSize.value.custom) {
			return;
		}
		const fileSize = await getFileSize(src);
		currentSize.value.minSize = fileSize;
		currentSize.value.maxSize = fileSize;
	}

	// 证件照裁剪接口
	const cut = async () => {
		const onlineUrl = userImage.value;
		if (!onlineUrl) return;
		if (!currentSize.value.px) return;
		const [widthPixel, heightPixel] = currentSize.value.px.split('x');
		const payload = {
			specId: currentSize.value.specId,
			width: +widthPixel,
			height: +heightPixel,
			imageUrl: onlineUrl,
		}
		const res = await uni.$request('/api/busi/photo/changeImageSize', payload);
		shuiyinUrl.value = res.data.shuiyinUrl;
		photoUrl.value = res.data.imageUrl;
		getCustomFileSize(photoUrl.value);
	}

	const onImageLoad = async (e) => {
		// 如果是自定义,且用户没有设置大小
		if (+e.detail.width > 2000 || +e.detail.height > 2000) {
			uni.$u.toast('图片宽/高过大，不能超过2000px')
			return;
		}
		// 校验通过, 上传照片到oss
		userImage.value = await uploadFile(tempImage.value);
		cut();
	}

	const onChoosePhoto = () => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
			// sourceType: ['album'], //从相册选择
			success: function(res) {
				// image加载tempImage并读取宽高，进行校验后再上传 => onImageLoad
				tempImage.value = res.tempFilePaths[0];
			}
		});
	};

	const onSizeChange = (item) => {
		console.log('onSizeChange', item)
		currentSize.value = {
			id: item.id,
			specId: item.specId,
			minSize: item.minSize,
			maxSize: item.maxSize,
			dpi: item.dpi,
			custom: item.custom,
			mm: item.value,
			px: item.px,
			unit: item.unit,
		};
		if (!userImage.value) {
			// uni.$u.toast('请先上传照片');
			return;
		}
		cut();
	}

	const onSavePhoto = () => {
		// 未上传图片
		if (!userImage.value) return;
		const [widthPixel, heightPixel] = currentSize.value.px.split('x');
		const data = {
			...currentSize.value,
			widthPixel,
			heightPixel,
			custom: true,
			photoUrl: encodeURIComponent(shuiyinUrl.value), //水印照
			saveUrl: encodeURIComponent(photoUrl.value), //单张照用于保存
		};

		uni.navigateTo({
			url: `/pages/make-photo/make-photo-save?type=${busiType.value}&data=${JSON.stringify(data)}`
		})

	}

	const handleContact = () => {

	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/photo-operator.scss";

	.page-photo-cut {}
</style>